<template>
  <div class="_condition">
    <el-dialog
      :title="'标签规则'"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :model-value="isDialog"
      :before-close="clearDialog"
      @open="openDialog"
    >
      <div class="_content">
        <!-- ----------------------- -->
        <h3>当前客群会动态筛选出满足以下条件的用户</h3>
        <Limits v-model="limitsList" :options="['tagLimit']"></Limits>
      </div>
      <div class="form-footer">
        <el-button @click="clearDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
      <!-- </el-dialog> -->
    </el-dialog>
  </div>
</template>

<script>
import Limits from "@/components/limits/Index.vue";
import CanvasApi from "@/api/canvasApi";
export default {
  props: {
    isDialog: Boolean,
    // propertyList: {
    //   require: false,
    //   type: Array,
    //   default: ()=>{
    //     return []
    //   },
    // },
    conditionalOriginal: String,
  },
  components: { Limits },
  data() {
    return {
      limitsList: {},
    };
  },

  watch: {
    isDialog(_val) {
      
      if (_val) {
        if (this.conditionalOriginal) {
          this.limitsList = JSON.parse(this.conditionalOriginal);
        }
      }
    },
  },
  methods: {
    clearDialog() {
      this.$emit("cancel");
    },
  
    submit() {
      
      if (!this.limitsList || JSON.stringify(this.limitsList) == "{}") {
        ElMessage.warning("请先创建表达式");
        return;
      }
      this.$emit("confirm", this.limitsList);
      this.clearDialog();
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-contain {
  display: flex;
}
._condition {
  display: block;
  font-family: PingFangSC-Regular, PingFang SC;

  :deep(.el-drawer) {
    line-height: 1;
    min-width: 1000px;
  }
  ._content {
    min-height: 300px;
    padding: 0 20px;
    margin-right: 20px;
    h3 {
      color: #000000;
      padding-bottom: 10px;
    }
  }
}

.form-footer {
  // display: flex;
  // justify-content: flex-end;
  position: absolute;
  right: 40px;
  bottom: 40px;
}

</style>
